<template>
  <div class="commentlist">
    <!-- 内容输入区 -->
    <div class="input" v-if="commentType !== 0">
      <!-- <textarea name="" id="" cols="160" rows="10" maxlength="140" placeholder="请输入内容"></textarea> -->
      <el-input
        type="textarea"
        show-word-limit
        :autosize="{ minRows: 2, maxRows: 6 }"
        placeholder="请输入内容"
        maxlength="140"
        clearable
        v-model="commentCont"
      >
      </el-input>
      <span @click="sendComment">评论</span>
    </div>
    <!-- 精彩评论 -->
    <div
      class="jingcai"
      v-if="hotcomments !== undefined && hotcomments.length !== 0"
    >
      精彩评论
    </div>
    <div class="comment-box" v-for="(item, index) in hotcomments" :key="index">
      <div class="left-image">
        <img :src="item.user.avatarUrl" alt="" />
      </div>
      <div class="right-box">
        <div class="content">
          <span style="color: #0c73c2">{{ item.user.nickname }}:&nbsp;</span
          >{{ item.content }}
        </div>
        <div
          class="huifu-box"
          v-for="relay in item.beReplied"
          :key="relay.commentId"
        >
          <img :src="relay.user.avatarUrl" alt="" />
          <div class="huifu-cont">
            <span style="color: #0c73c2">{{ relay.user.nickname }}:&nbsp;</span
            >{{ relay.content }}
          </div>
        </div>
        <div class="time">
          <div>{{ item.time | Time }}</div>
          <!-- <div>2020</div> -->
        </div>
      </div>
    </div>
    <!-- 最新评论 -->
    <div class="jingcai" v-if="comments.length !== 0">
      最新评论({{ total }})
    </div>
    <div class="jingcai" v-else>还没有评论哦~~</div>
    <div class="comment-box" v-for="item in comments" :key="item.commentId">
      <div class="left-image">
        <img :src="item.user.avatarUrl" alt="" />
      </div>
      <div class="right-box">
        <div class="content">
          <span style="color: #0c73c2">{{ item.user.nickname }}:&nbsp;</span
          >{{ item.content }}
        </div>
        <div
          class="huifu-box"
          v-for="relay in item.beReplied"
          :key="relay.commentId"
        >
          <img :src="relay.user.avatarUrl" alt="" />
          <div class="huifu-cont">
            <span style="color: #0c73c2">{{ relay.user.nickname }}:&nbsp;</span
            >{{ relay.content }}
          </div>
        </div>
        <div class="time">
          <div class="date">
            <span>{{ item.time | Time }}</span>
            <span class="reply" @click="onreply">回复</span>
          </div>
          <!-- <div>2020</div> -->
        </div>
      </div>
    </div>
    <el-pagination
      ref="pagination"
      background
      :current-page="page"
      :page-count="page"
      :page-size="limit"
      layout="prev, pager, next, jumper,total"
      :total="total"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { sendComment } from "@/api/comment.js";
export default {
  name: "CommentList",
  components: {},
  props: {
    comments: {
      type: [String, Array, Object]
    },
    hotcomments: {
      type: [String, Array, Object]
    },
    total: {
      type: Number
    },
    page: {
      type: Number
    },
    commentType: {
      type: Number
    },
    t: {
      type: Number
    },
    limit: {
      type: Number
    },
    musicId: {
      type: Number
    }
  },
  data() {
    return {
      // comment: "",
      // themes: "",
      // page: 1,
      // comments: [], //评论列表
      // hotcomments: "", // 精彩评论
      // total: 0,
      // limit: 40,
      commentCont: "",
      user: ""
    };
  },
  computed: {
    tokenCookie() {
      return this.$store.state.tokenCookie;
    }
  },
  watch: {
    tokenCookie() {
      this.user = this.$store.state.tokenCookie;
    }
  },
  created() {},
  mounted() {},
  methods: {
    currentChange(page) {
      this.$emit("currentChange", page);
      document.querySelector(".el-main").scrollTop = 0;
      document.querySelector(".el-drawer").scrollTop = 0;
      // console.log(document.querySelector(".el-drawer").scrollTop);
    },
    async sendComment() {
      // let userinfo = localStorage.getItem('userInfo')
      if (this.userInfo === 0) {
        this.$message({
          message: "请登录后在评论",
          type: "warning"
        });
        return;
      }
      // let token = JSON.parse(localStorage.getItem('userInfo'))
      const { data } = await sendComment({
        t: this.t,
        type: this.commentType,
        id:
          this.$route.query.id == undefined
            ? this.musicId
            : this.$route.query.id,
        content: this.commentCont,
        cookie: this.tokenCookie.cookie
      });
      if (data.code == 200) {
        // this.getplayliscomment()
        this.comments.unshift(data.comment);
        this.commentCont = " ";
        this.$message({
          message: "评论成功！",
          type: "success"
        });
      }
    },
    onreply() {
      this.$emit("onreply");
    }
  }
};
</script>

<style scoped lang="scss">
.commentlist {
  padding: 0 9.375rem;
  margin-bottom: 5.625rem;
  font-size: 14px;
  .input {
    padding: 1.875rem 1.25rem 2.5rem 1.25rem;
    background-color: #f4f4f4;
    span {
      float: right;
      width: 3.75rem;
      height: 1.875rem;
      text-align: center;
      line-height: 1.875rem;
      // padding: 0.1875rem 0.5rem;
      margin-top: 0.3125rem;
      margin-right: 1.875rem;
      border: 1px solid #ccc;
      border-radius: 1.25rem;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }
  }
  .jingcai {
    height: 1.875rem;
    line-height: 1.875rem;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    padding: 0 1.25rem;
  }
}
.comment-box {
  width: 100%;
  padding: 0.625rem 1.25rem;
  display: flex;
  border-top: 0.0625rem dashed #ccc;
  .left-image {
    width: 2.5rem;
    height: 2.5rem;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .right-box {
    width: 100%;
    margin-left: 1.875rem;
    display: flex;
    flex-direction: column;
    .huifu-cont {
      width: 100%;
      margin-top: 0.625rem;
      padding: 0.9375rem;
      border-radius: 0.3125rem;
    }
    .time {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1.25rem;
      font-size: 0.875rem;
      .date {
        .reply {
          margin-left: 0.9375rem;
          cursor: pointer;
          color: #0c73c2;
        }
      }
    }
  }
  .huifu-box {
    width: 100%;
    display: flex;
    align-items: center;
    // padding: 0.625rem 0;
    img {
      width: 2.1875rem;
      height: 2.1875rem;
      margin-right: 1.25rem;
      border-radius: 50%;
    }
    .huifu-cont {
      border: 0;
      background: #f4f4f4;
    }
  }
}
.el-pagination {
  margin-top: 1.875rem;
}
/deep/.el-loading-spinner {
  .el-loading-text {
    font-size: 1.75rem !important;
  }
}
</style>
